<route lang="json5" type="page">
	{
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '',
	disableScroll: true, // 微信禁止页面滚动
	'app-plus': {
	bounce: 'none', // 禁用 iOS 弹性效果
	},
	},
	}
</route>
<template>
	<PageLayout :navbarShow="false">
		<view calss="devicebody" style="width: 100%;height: 100%;">
			<view class="wrap" :style="{
		    '--nav-height': `${statusBarHeight + navHeight}px`,
		    '--status-bar-height': `${statusBarHeight}px`,
			'margin-top':`${rightButtonMarginTopHeight}px`
		  }">
				设备管理
			</view>
			<view style="background: #f1f1f1;height: 100%;">
				<view style="background: #f3f3f3;display: flex;width: 100%;margin:0 10px;padding-top: 10px;">
					<view style="width: calc(90% - 20px);"><wd-input placeholder="请输入设备SN编号" v-model="searchValue"
							clearable style="padding: 0 15upx;" /></view>
					<view
						style="width: 10%;display: flex;justify-content: center;align-items: center;background: rgb(47, 212, 174);"
						@click="handleClick">
						<image :src="searchimg" mode="widthFix" style="width: 20px;height: 20px;"></image>
					</view>
				</view>
				<view v-if="devList.length>0" class="d-row">
				
				<scroll-view scroll-y="true" @scrolltolower="handleScrollToLower">
					<view v-for="(value,index) in devList" :key="value.id" class="d-frame">
						<view class="d-on">
							<view v-if="value.status == '1'" class="d-onstate">
								<view></view>在线
							</view>
							<view v-else class="d-offstate">
								<view></view>离线
							</view>
						</view>
						<view class="d-flex">
							<view>设备SN编号：{{value.equipmentSn}}</view>
							<view v-if="value.equipmentType=='1'" style="width: 45%;">设备类型：单碳基</view>
							<view v-else style="width: 45%;">设备类型：双碳基</view>
						</view>
						<view class="d-flex">
							<view>设备出厂时间：{{value.equipmentCreatetime}}</view>
							<view style="width: 45%;">所属碳商：{{value.belongCarbon}}</view>
						</view>
						<view class="d-flex">
							<view>所属车辆：{{value.vehicleId}}</view>
							<view></view>
						</view>
					</view>
					 <wd-loadmore :state="state" />
				</scroll-view>
					<!-- <wd-pagination v-model="pageValue" @change="handleChange" show-icon ></wd-pagination> -->
				</view>
				<view v-else style="width: 100%;display: flex;justify-content: center;margin-top: 2rem;">暂无数据</view>
			</view>
		</view>
	</PageLayout>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { onShow, onHide, onLoad, onReady, onReachBottom } from '@dcloudio/uni-app'
	import { http } from '@/utils/http'
	import { useUserStore } from '@/store/user'
	const searchValue = ref()
	const userStore = useUserStore()
	const devList = ref([])
	const pageValue = ref(1)
	const pageType = ref(true)
	const state = ref<string>('loading')
	const searchimg = '/static/search.png'
	const handleClick = () => {
		appQueryDevice()
	}

	const globalData = getApp().globalData
	const { systemInfo, navHeight } = globalData
	const { statusBarHeight } = systemInfo
	const  handleScrollToLower=()=> {
		if(pageType.value){
			++pageValue.value
			appQueryDevices()
		}
	}
	const appQueryDevice = () => {
		http
			.get('/zbEquipment/zbEquipment/list', {
				equipmentSn: searchValue.value,
				pageNo: 1,
				pageSize: 10
			}, { 'X-Access-Token': userStore.getUserInfo().token })
			.then((res : any) => {
				if (res.success && res.result.records.length > 0) {
					devList.value = res.result.records
				} else {
					devList.value = []
					pageType.value=false
					state.value = 'finished'
				}
			})
	}
	const appQueryDevices = () => {
		http
			.get('/zbEquipment/zbEquipment/list', {
				equipmentSn: searchValue.value,
				pageNo: pageValue.value,
				pageSize: 10
			}, { 'X-Access-Token': userStore.getUserInfo().token })
			.then((res : any) => {
				if (res.result.records.length > 0) {
					devList.value.push(res.result.records)
				} else {
					pageType.value=false
					state.value = 'finished'
				}
			})
	}
	const rightButtonMarginTopHeight = ref(0)
	onShow(() => {
		const rightButton = uni.getMenuButtonBoundingClientRect()
		rightButtonMarginTopHeight.value = rightButton.top - 5
		appQueryDevice()
	})
</script>

<style lang="scss" scoped>
	.wrap {
		height: 84rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFF;
		background: #2fd4ae;
	}

	.d-row {
		margin: 20upx 20upx 0 20upx;
		overflow: auto;
		height: calc(100% - 130px);

		.d-frame {
			background: #fff;
			border: 1px solid #e1e1e1;
			border-radius: 5px;
			padding: 20upx;
			font-size: 10px;
			margin-bottom: 20upx;

			.d-on {
				display: flex;
				justify-content: flex-end;

				.d-onstate {
					background: #2fd4ae;
					color: #fff;
					border-radius: 8px;
					font-size: 9px;
					padding: 4upx 20upx;
					display: flex;

					view {
						background: #fff;
						border-radius: 50%;
						width: 8upx;
						height: 8upx;
						margin-right: 1px;
					}
				}

				.d-offstate {
					background: #b7b7b7;
					color: #fff;
					border-radius: 8px;
					font-size: 9px;
					padding: 4upx 20upx;
					display: flex;

					view {
						background: #fff;
						border-radius: 50%;
						width: 8upx;
						height: 8upx;
						margin-right: 1px;
					}
				}
			}

			.d-flex {
				display: flex;
				justify-content: space-between;
			}
		}
	}
	:deep(.wd-divider){
		margin: -10px 0 0 0;
	}
</style>